/*
 * @Author: swf 
 * @Date: 2019-05-30 10:01:47 
 * @Last Modified by: swf
 * @Last Modified time: 2019-06-04 11:40:29
 */
"use strict";
class Tabs {
    constructor(options) {
        // 默认 属性
        let defaulOptions = {
            element: '',
            event: 'click',
            activeClassName: 'on',
            motion: 'none',
            duration: '1s',
        }
        /**
         * Object.assign() 方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。
         */
        this.options = Object.assign({}, defaulOptions, options);

        // 调用函数

        this.checkOptions().init().bindEvents();
    }

    checkOptions() {
        // 检测对象元素 是否存在
        if (!this.options.element) {
            throw new Error('element is required')
        }
        return this;
    }
    bindEvents() {

        // 获取 导航数组
        let nav = this.options.element.children[0].children;
        // 获取 内容数组
        let items = this.options.element.children[1].children;

        let eventName = '';

        if (this.options.event == 'click') {
            eventName = 'click'
        } else if (this.options.event == 'hover') {
            eventName = 'mouseenter'
        }
        if (this.options.motion == 'none') {
            // 默认动作
            // 遍历导航 添加事件
            for (let i = 0; i < nav.length; i++) {
                nav[i].addEventListener(eventName, (e) => {

                    for (let k = 0; k < nav.length; k++) {
                        if (k == i) {
                            nav[k].classList.add(this.options.activeClassName);

                            items[k].style.display = 'block';

                        } else {
                            nav[k].classList.remove(this.options.activeClassName)

                            items[k].style.display = 'none';

                        }

                    }

                })
            }

        } else{
            let content = this.options.element.children[1];
            console.log(content);
            
            content.style.transition = `transform ${this.options.duration}`;
            let w = this.options.element.offsetWidth;
            let h = this.options.element.offsetHeight;
           
            // 左右动作
             // 遍历导航 添加事件
             for (let i = 0; i < nav.length; i++) {
                nav[i].addEventListener(eventName, (e) => {

                    for (let k = 0; k < nav.length; k++) {
                        if (k == i) {
                            nav[k].classList.add(this.options.activeClassName);

                        } else {
                            nav[k].classList.remove(this.options.activeClassName)
                        }

                    }

                    if(this.options.motion == 'left'){
                        content.style.transform = `translateX(-${w * i}px)`
                    }
                        
                })
            }



        }


    }

    init() {
        // 初始化

        this.options.element.children[0].children[0].classList.add(this.options.activeClassName);

        let items = this.options.element.children[1].children;

        if (this.options.motion == 'none') {
            for (let i = 0; i < items.length; i++) {
                if (i == 0)
                    items[i].style.display = 'block'
                else
                    items[i].style.display = 'none';
            }
        }

        return this
    }




}